<template>
    <view style="height: 100%">
        <l-popup :show="showClone" :showMask="true" contentAlign="bottom" :locked="lockedClone" @lintap="handleClickPopUp" :z-index="zIndex">
            <view class="l-action-sheet">
                <view class="l-item-button l-class-title l-title-class" v-if="titleClone">
                    {{ titleClone }}
                </view>
                <view :hover-class="isHover ? 'list-hover' : ''" v-for="(item, index) in itemListClone" :key="index">
                    <l-button
                        @lintap="handleClickItem($event, { index, item })"
                        :data-index="index"
                        :data-item="item"
                        :open-type="item.openType"
                        :icon="item.icon"
                        type="default"
                        size="large"
                        :special="true"
                        long
                    >
                        <view
                            :style="item.color ? 'color: ' + item.color : ''"
                            :class="'l-item-button l-class-item l-item-class ' + (item.image || item.icon ? 'l-image-button' : '')"
                        >
                            <image v-if="item.image" class="l-button-image" :src="item.image" :style="item.imageStyle" />
                            <l-icon
                                v-else-if="item.icon"
                                :name="item.icon"
                                l-class="l-item-button"
                                :size="item.iconSize"
                                :color="item.iconColor ? item.iconColor : item.color"
                            ></l-icon>
                            <text class="l-button-text">{{ item.name }}</text>
                        </view>
                    </l-button>
                </view>
                <view :class="'l-cancel l-class-cancel l-cancel-class ' + (isIphoneX ? 'l-cancel-x' : '')" v-if="showCancelClone" :hover-class="isHover ? 'list-hover' : ''">
                    <l-button type="default" size="large" :long="true" @lintap="handleClickCancel" :special="true">
                        <view class="l-item-button l-cancel-button">{{ cancelTextClone }}</view>
                    </l-button>
                </view>
            </view>
        </l-popup>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lPopup from '../popup/index';
import lButton from '../button/index';
import zIndex from '../behaviors/zIndex';
import hover from '../behaviors/hover';
export default {
    data() {
        return {
            success: '',
            fail: '',
            isIphoneX: false,
            titleClone: '',
            isHover: false,
            cancelTextClone: '',
            showClone: '',
            lockedClone: '',
            showCancelClone: ''
        };
    },
    mixins: [zIndex, hover],
    externalClasses: ['l-class-title', 'l-class-item', 'l-class-cancel', 'l-title-class', 'l-item-class', 'l-cancel-class'],
    props: {
        locked: Boolean,
        showCancel: Boolean,
        show: Boolean,
        itemList: Array,
        cancelText: {
            type: String,
            default: '取消'
        },
        title: String,
        zIndex: {
            type: Number,
            default: 777
        },
        openApi: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            if (this.openApi) {
                this.initActionSheet();
            }
            this.initUIAdapter();
        },

        initUIAdapter() {
            uni.getSystemInfo({
                success: (e) => {
                    this.setData({
                        isIphoneX: 'iPhone X' === e.model
                    });
                }
            });
        },

        initActionSheet() {
            uni.lin = uni.lin || {};
            uni.lin.showActionSheet = (e = {}) => {
                const { itemList: t = [], success: s = null, fail: i = null, title: a = '', locked: l = false, cancelText: n = '取消', showCancel: c = false } = e;
                this.setData({
                    itemListClone: t.slice(0, 10),
                    success: s,
                    fail: i,
                    titleClone: a,
                    lockedClone: l,
                    cancelTextClone: n,
                    showCancelClone: c,
                    showClone: true
                });
                return this;
            };
        },

        handleClickItem(e) {
            const { success: t } = this;
            if (t) {
                t({
                    ...e.currentTarget.dataset
                });
            }
            this.$emit(
                'linitemtap',
                {
                    detail: {
                        ...e.currentTarget.dataset
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            this._hideActionSheet();
        },

        _showActionSheet() {
            this.setData({
                showClone: true
            });
        },

        _hideActionSheet() {
            this.setData({
                showClone: false
            });
        },

        handleClickCancel() {
            const { fail: e } = this;
            if (e) {
                e({
                    errMsg: 'showactionsheet:fail cancel'
                });
            }
            this.$emit(
                'lincancel',
                {
                    detail: {
                        errMsg: 'showactionsheet:fail cancel'
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            this._hideActionSheet();
        },

        handleClickPopUp() {
            this.lockedClone || this.handleClickCancel();
        }
    },
    created: function () {}
};
</script>
<style>
.l-action-sheet {
    background: #f7f7f7;
}
.l-item-button {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #fff;
    border-bottom: 2rpx solid #f3f3f3;
    font-size: 28rpx;
    color: #45526b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}
.l-cancel {
    margin-top: 12rpx;
}
.l-cancel-x .l-item-button {
    padding-bottom: 44rpx;
}
.l-image-button > .l-button-text {
    margin-left: 20rpx;
}
.list-hover {
    opacity: 0.8;
}
</style>
